﻿@model BudgetMealsModels.Entities.User

@{
    ViewBag.Title = Model.UserName + "'s Profile";
}

<link href="@Url.Content("~/Content/CSS/Tabs.css")" rel="stylesheet" type="text/css" />

<h2>@Model.UserName's Profile</h2>
<br />

    @if (Model.ImageData != null)
    {
        <div style="float:left;margin-right:10px;">
            <img width="130" height="165" src="@Url.Action("GetImage", "User", new{Model.UserID})" alt="~/Content/Images/Misc/NoImage.png" />
        </div>
    }
    @if (Session["CurrentUser"] != null && Model.UserID == (int)Session["CurrentUser"])
    {<div style="float:right;">
     @Html.ActionLink("Edit Profile", "Edit", new { id = Model.UserID })
     </div>
    }
    <div class="display-label">Name</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.FirstName) @Html.DisplayFor(model => model.LastName)
    </div>

    <div class="display-label">Username</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.UserName)
    </div>

    <div class="display-label">Biography</div>
    <div class="display-field">
        @if (Model.Biography != null && Model.Biography != string.Empty)
        {
            @Html.Raw(Model.Biography)
        }
        else
        {
            @:No biography provided.   
        }
    </div>

    <div class="display-label">Chef Rating</div>
    <div class="display-field">
        @if(Model.ChefRating.ToString() == "NaN")
        {
            <span>No Rating</span>
        }
        else
        {
            for(int i=0; i < Model.ChefRating; i++){
                <img src="../../Content/Images/Layouts/ModernLayout/filledStar.png" alt="filledStar" width="25px;" height="25px;"/>  
            }
            for (int i = (int)Model.ChefRating; i < 5; i++)
            {
                <img src="../../Content/Images/Layouts/ModernLayout/emptyStar.png" alt="emptyStar" width="25px;" height="25px;"/>
            }
        }
    </div>
    <span id="RecipesTab" class="Tab" onclick="TabClicked('Recipes');">Recipes</span>
    <span id="MealsTab" class="Tab" onclick="TabClicked('Meals');">Meals</span>
    <div id="Recipes" class="TabContent" style="display: block; margin-top: 1px;">
        @{Html.RenderAction("ShowRecipes", new { id = Model.UserID });}
    </div>
    <div id="Meals" class="TabContent" style="margin-top: 1px;">
        @{Html.RenderAction("ShowMeals", new { id = Model.UserID });}
    </div>

    <script type="text/ecmascript">
        function TabClicked(show) {
            $(".TabContent").hide();
            $("#" + show).show();
        }
    </script>
